<!DOCTYPE html>
<html>
    <head>
        <meta name="layout" content="main" />
        <g:set var="entityName" value="${message(code: 'roleMenu.label', default: 'RoleMenu')}" />
        <title>菜单权限</title>
        <asset:stylesheet src="ztree/demo.css"/>
        <asset:stylesheet src="ztree/zTreeStyle.css/"/>
        <asset:javascript src="ztree/jquery.ztree.core.js/"/>
        <asset:javascript src="ztree/jquery.ztree.excheck.js/"/>
        <asset:javascript src="ztree/jquery.ztree.exedit.js/"/>
        
        <style>
            .ztree li span.button.add {margin-left:2px; margin-right: -1px; background-position:-144px 0; vertical-align:top; *vertical-align:middle}
        </style>

        <script type="text/javascript">

            $(function(){
                $("#searchRole").click(function () {
                    var roleName = $("#roleName").val();
                    initRoleMenu(roleName)
                })
            })

            var setting = {
                check: {
                    enable: false
                },
                edit: {
                    enable: true,
                    showRemoveBtn: showRemoveBtn,
                    showRenameBtn: true
                },
                data: {
                    simpleData: {
                        enable: true
                    }
                },
                callback: {
                    beforeEditName: beforeEditName,
                    beforeRemove: beforeRemove,
                    onRemove: onRemove,
                    beforeClick: beforeClick,
                    onClick: onClick,
                }
            };

            var setting1 = {
                check: {
                    enable: true, 
                    chkboxType: {"Y" : "", "N" : ""}
                    // chkboxType: {"Y" : "ps", "N" : "ps"}
                },
                data: {
                    simpleData: {
                        enable: true
                    }
                },
                callback: {
                    beforeCheck: beforeCheck,
                    onCheck: onCheck,
                    onCollapse: zTreeOnCollapse1,
                    onExpand: zTreeOnExpand1,
                    onClick:onClick
                }
            };

            // 初始化数据
            initRoleMenu();

            // 初始化数据
            function initRoleMenu(name) {
                $.ajax({
                    type: "post",
                    url: "/roleMenu/getAllRole",
                    data:{
                        name: name
                    },
                    success: function (data) {
                        if (data.status == "success") {
                            var roleList = data.roleList
                            var menuList = data.menuList
                            $(document).ready(function() {
                                $.fn.zTree.init($("#treeDemo"), setting, roleList);
                                expandAll("treeDemo");
                                
                                var list = $('#treeDemo1').children().children('ul');
                                list.css('paddingLeft','27px');
                                if(list.children().children('ul')){
                                    list = list.children().children('ul');
                                    list.css('paddingLeft','27px');
                                    callbackUl(list);
                                }
                                function callbackUl (ul) {
                                    if(ul.length != 0){
                                        ul = ul.children().children('ul');
                                        ul.css('paddingLeft', '27px');
                                        callbackUl(ul)
                                    }else{
                                        return;
                                    }
                                }
                                $(".attrClass:even").removeClass("fa-folder-o").removeClass("fa");
                                $(".attrClass:even").removeClass("fa-folder-open-o").removeClass("fa");
                                $.fn.zTree.init($("#treeDemo1"), setting1, menuList);
                                expandAll("treeDemo1");
                                var list1 = $('#treeDemo1').children().children('ul');
                                list1.css('paddingLeft','27px');
                                if(list1.children().children('ul')){
                                    list1 = list1.children().children('ul');
                                    list1.css('paddingLeft','27px');
                                    callbackUl1(list1);
                                }
                                function callbackUl1 (li) {
                                    if(li.length != 0){
                                        li = li.children().children('ul');
                                        li.css('paddingLeft', '27px');
                                        callbackUl(li)
                                    }else{
                                        return;
                                    }
                                }
                                $(".attrClass:even").removeClass("fa-folder-o").removeClass("fa");
                                $(".attrClass:even").removeClass("fa-folder-open-o").removeClass("fa");
                            });
                        }
                    },
                    error: function () {
                        console.log("获取失败，请稍后重试");
                    },
                });
            }

            // 查询角色
            function queryRoleById(id) {
                var role;
                $.ajax({
                    type: "post",
                    url: "/roleMenu/queryRoleById",
                    data:{
                        id: id
                    },
                    async: false,
                    success: function (data) {
                        if (data.status == "success") {
                            role = data.role
                        }
                    },
                    error: function () {
                        console.log("获取失败，请稍后重试");
                    },
                });
                return role;
            }

            // 查询裁断权限
            function queryAllRoleMunuById(id) {
                var roleMenuList;
                $.ajax({
                    type: "post",
                    url: "/roleMenu/queryAllRoleMunuById",
                    data:{
                        id: id
                    },
                    async: false,
                    success: function (data) {
                        if (data.status == "success") {
                            roleMenuList = data.roleMenuList
                        }
                    },
                    error: function () {
                        console.log("获取失败，请稍后重试");
                    },
                });
                return roleMenuList;
            }

            // 删除角色
            function deleteRoleMemu(roleId) {
                $.ajax({
                    type: "post",
                    url: "/roleMenu/deleteRoleMemu",
                    data:{
                        roleId: roleId
                    },
                    success: function (data) {
                        if (data.status == "success") {
                            toastr.error('删除成功');
                            initRoleMenu();
                        }
                        if (data.status == "failed") {
                            toastr.error(data.message);
                            initRoleMenu();
                        }
                    },
                    error: function () {
                        console.log("获取失败，请稍后重试");
                    },
                });
            }

            // 菜单权限
            function addRoleMenu(roleId, menuId, flag) {
                if (!roleId) {
                    toastr.error('请先选择角色');
                    return
                }
                if (!menuId) 
                {
                    toastr.error('请选择菜单');
                    return    
                }
                $.ajax({
                    type: "post",
                    url: "/roleMenu/addRoleMenu",
                    data:{
                        roleId: roleId,
                        menuId: menuId,
                        flag: flag
                    },
                    success: function (data) {
                        if (data.status == "success") {
                            toastr.error('权限更新成功');
                            return
                        }
                        if (data.status == "failed") {
                            toastr.error(data.message);
                            return
                        }
                    },
                    error: function () {
                        console.log("获取失败，请稍后重试");
                    },
                });
            }


            var log, className = "dark";
            function expandAll(treeId) {
                var zTree = $.fn.zTree.getZTreeObj(treeId);
                zTree.expandAll(true);
                $('#treeDemo1 a span.ico_open').attr('class','button ico_open fa fa-folder-o');
            }

            function beforeCheck(treeId, treeNode) {
                var roleId = $("#clickedRole").val();
                var menuId = treeNode.id;
                if (!roleId) {
                    toastr.error('请先选择角色');
                    return false;
                }
                if (!menuId) 
                {
                    toastr.error('请选择菜单');
                    return false;
                }
                return (treeNode.doCheck !== false);
            }
            function onCheck(e, treeId, treeNode) {
                var roleId = $("#clickedRole").val();
                var menuId = treeNode.id;
                var flag = treeNode.checked;
                addRoleMenu(roleId, menuId, flag);
            }
            function beforeEditName(treeId, treeNode) {
                className = (className === "dark" ? "":"dark");
                var zTree = $.fn.zTree.getZTreeObj("treeDemo");
                zTree.selectNode(treeNode);
                setTimeout(function() {
                    var role = queryRoleById(treeNode.id);
                    $("#id").val(role.id);
                    $("#name").val(role.name);
                    $("#authority").val(role.authority);
                    $("#title").text("编辑角色");
                    $("#updateRole").click();
                }, 0);
                return false;
            }
            function beforeRename(treeId, treeNode, newName, isCancel) {
                className = (className === "dark" ? "":"dark");
                if (newName.length == 0) {
                    setTimeout(function() {
                        var zTree = $.fn.zTree.getZTreeObj("treeDemo");
                        zTree.cancelEditName();
                    }, 0);
                    return false;
                }
                return true;
            }
            function beforeClick(treeId, treeNode, clickFlag) {
                $("#clickedRole").val(treeNode.id);
                return (treeNode.click != false);
            }
            function onClick(event, treeId, treeNode, clickFlag) {
                var roleMenuList = queryAllRoleMunuById(treeNode.id)
                $.fn.zTree.init($("#treeDemo1"), setting1, roleMenuList);
                expandAll("treeDemo1");
                $('#treeDemo li a span.ico_docu').parent().parent().css('paddingLeft','27px');
                $('#treeDemo1 li a span.ico_docu').parent().parent().css('paddingLeft','27px');
                var list1 = $('#treeDemo1').children().children('ul');
                list1.css('paddingLeft','27px');
                if(list1.children().children('ul')){
                    list1 = list1.children().children('ul');
                    list1.css('paddingLeft','27px');
                    callbackUl1(list1);
                }
                function callbackUl1 (li) {
                    if(li.length != 0){
                        li = li.children().children('ul');
                        li.css('paddingLeft', '27px');
                        callbackUl(li)
                    }else{
                        return;
                    }
                }
            }       
            function beforeRemove(treeId, treeNode) {
                className = (className === "dark" ? "":"dark");
                var zTree = $.fn.zTree.getZTreeObj("treeDemo");
                zTree.selectNode(treeNode);
                return confirm("请确认是否删除 ”" + treeNode.name + "“ 角色？");
            }
            function onRemove(e, treeId, treeNode) {
                deleteRoleMemu(treeNode.id);
            }
            function showRemoveBtn(treeId, treeNode) {
                return !treeNode.children;
            }
            function zTreeOnCollapse1() {
                $('#treeDemo1 a span.ico_close').attr('class','button ico_close fa fa-folder-open-o');
            };
            function zTreeOnExpand1() {
                $('#treeDemo1 a span.ico_open').attr('class','button ico_open fa fa-folder-o');
            };
        </script>
    </head>
    <body>

    <div class="small-header">
        <div class="hpanel">
            <div class="panel-body">
                <div id="hbreadcrumb" class="pull-right">
                    <ol class="hbreadcrumb breadcrumb">
                        <li>CINDATA PLS</li>
                        <li class="active">
                            <span>菜单权限管理</span>
                        </li>
                    </ol>
                </div>

                <h2 class="font-light m-b-xs">
                    菜单权限管理
                </h2>
            </div>
        </div>
    </div>

    <div class="panel-body" style="display: flex; justify-content: center;">
        <div class="form-group col-sm-6">
            <div class="col-sm-7">
                <input type="text" class="form-control" id="roleName" name="roleName" placeholder="请输角色名称">
            </div>
            <div class="col-sm-5">
                <a class="btn btn-info" id="searchRole">搜索</a>
                <a class="btn btn-primary" id="addRole">+ 新增角色</a>
                <a class="btn btn-info hide" href="#myModal" data-toggle="modal" id="updateRole">+ 新增角色</a>
            </div>
        </div>
    </div>

    <input type="hidden" name="clickedRole" id="clickedRole">

    %{--树形菜单--}%

    <div class="content" style="padding-top: 0;">
        <div class="row">
            <div class="col-lg-4">
                <div class="hpanel">
                    <div class="panel-body">
                        <ul id="treeDemo" class="ztree"></ul>
                    </div>
                </div>
            </div>

            <div class="col-lg-4">
                <div class="hpanel">
                    <div class="panel-body">
                        <ul id="treeDemo1" class="ztree"></ul>
                    </div>
                </div>
            </div>
        </div>
    </div>

    %{--添加角色弹窗--}%
    <div class="content animate-panel p-b-n">
        <div class="row">
            <div class="hpanel">
                <div class="modal fade hmodal-info" id="myModal" tabindex="-1" role="dialog" aria-hidden="true">
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <div class="color-line"></div>
                            <div class="modal-header">
                                <h4 class="modal-title"><span id="title">新增角色</span><small style="font-size: 14px" class="font-bold"> (注：<span style="color: red">*</span> 为必填)</small></h4>
                            </div>
                            <g:form action="saveRole" class="form-horizontal" name="myForm">
                                <div class="modal-body form-horizontal">

                                <input type="hidden" name="id" id="id" value="">

                                    <div class="form-group">
                                        <label class="col-md-2 control-label is-required">角色名称</label>
                                        <div class="col-md-4">
                                            <g:textField class="form-control" type="text" name="name" id="name"/>
                                        </div>

                                        <label class="col-md-2 control-label is-required">角色标识</label>
                                        <div class="col-md-4">
                                            <g:textField class="form-control" type="text" name="authority" id="authority"/>
                                        </div>
                                    </div>
                                </div>

                                <div class="modal-footer">
                                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                                    <button type="button" class="btn btn-primary" id="submit">确定</button>
                                </div>
                            </g:form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <g:javascript>
        $(function() {
            $('#treeDemo li a span.ico_docu').parent().parent().css('paddingLeft','27px');
            $('#treeDemo1 li a span.ico_docu').parent().parent().css('paddingLeft','27px');
            $("#addRole").click(function() {
                $("#id").val("");
                $("#name").val("");
                $("#authority").val("");
                $("#title").text("新增角色")
                $("#updateRole").click();
            })

            $("#submit").click(function () {
                var name = $("#name").val();
                if(!name)
                {
                    alert("请输入角色名称！");
                    return;
                }

                var authority = $("#authority").val();
                if(!authority)
                {
                    alert("请输入角色标识！");
                    return;
                }

                $("#submit").attr("type", "submit");
            })
            $(".attrClass:even").removeClass("fa-folder-o").removeClass("fa");
            $(".attrClass:even").removeClass("fa-folder-open-o").removeClass("fa");
        })
    </g:javascript>
    </body>
</html>

